<script setup lang="ts">
import { getBusinessBind } from '@/utils/custom'
import type { BusinessUIQueryColumnType } from '@/types/custom'
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import TemplateSelector from '@/views/components/form/components/TemplateSelector.vue'

const modelValue = defineModel<any>({})

interface Props {
  items: BusinessUIQueryColumnType[]
  getOptions: (form: BusinessUIQueryColumnType) => SelectOptionType[]
  labelPosition?: string
}

withDefaults(defineProps<Props>(), {
  labelPosition: 'right'
})

const emit = defineEmits(['linkage', 'fetch'])

// 表单
const ruleFormRef = ref<FormInstance>()

const onLinkageChange = (form: BusinessUIQueryColumnType) => {
  emit('linkage', form)
}

/**
 * 获取禁用
 * @param form
 */
const getDisabled = (form: BusinessUIQueryColumnType) => {
  return Boolean(form.disable_on_edit && modelValue.value.id)
}

/**
 * 是否显示列
 * @param form
 */
const isShowCol = (form: BusinessUIQueryColumnType) => {
  const isComponent = !!form.component
  const isText = ['custom-pre', 'custom-json', 'custom-title'].includes(form.component)
  const isValue = !!modelValue.value[form.field]
  const isTextAndValue = isText ? isValue : true
  return isComponent && isTextAndValue
}

/**
 * 是否是分组
 * @param form
 */
const getFormRules = (form: BusinessUIQueryColumnType) => {
  if (form.required) {
    return [{ required: true, message: `请输入${form.title}`, trigger: 'change' }]
  } else {
    return []
  }
}

const validate = (callback: (valid: boolean) => {}) => {
  ruleFormRef.value?.validate((valid) => {
    callback(valid)
  })
}

const getTitle = (form: BusinessUIQueryColumnType) => {
  return ['custom-selector'].includes(form.component) ? undefined : form.title
}

const onFetch = () => {
  emit('fetch')
}

defineExpose({ validate })
</script>

<template>
  <el-form ref="ruleFormRef" :model="modelValue" label-width="auto" :label-position="labelPosition">
    <el-row :gutter="5">
      <template v-for="(form, index) in items">
        <el-col v-if="isShowCol(form)" :key="index" v-bind="form.set_json_parse.col" class="mt5">
          <el-form-item
            :label="getTitle(form)"
            :prop="form.field"
            :required="form.required"
            :rules="getFormRules(form)"
          >
            <el-input
              v-if="['el-input', 'el-input-textarea'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
              class="w100"
            />
            <el-input-number
              v-if="['el-input-number'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
              class="w100"
            />
            <el-switch
              v-else-if="['el-switch'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
            />
            <el-color-picker
              v-else-if="['el-color-picker'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
            />
            <el-rate
              v-else-if="['el-rate'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
            />
            <el-button
              v-else-if="['el-button'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              >{{ form.title || form.field }}
            </el-button>
            <el-slider
              v-else-if="['el-slider'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
              >{{ form.title || form.field }}
            </el-slider>
            <el-date-picker
              v-else-if="['el-date-picker'].includes(form.component)"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
              class="w100"
            />
            <el-select
              v-else-if="form.elComponent === 'el-select'"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              v-model="modelValue[form.field]"
              @change="onLinkageChange(form)"
            >
              <el-option
                v-for="item in getOptions(form)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-tree-select
              v-else-if="form.elComponent === 'el-tree-select'"
              v-model="modelValue[form.field]"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              :data="getOptions(form)"
              @change="onLinkageChange(form)"
              class="w100"
            />
            <el-cascader
              v-else-if="form.elComponent === 'el-cascader'"
              v-model="modelValue[form.field]"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              :data="getOptions(form)"
              @change="onLinkageChange(form)"
              class="w100"
            />
            <TemplateSelector
              v-else-if="form.component === 'custom-selector'"
              v-model="modelValue[form.field]"
              :title="form.title"
              :business_id="form.business_id"
              :field="form.field"
              :disabled="getDisabled(form)"
              v-bind="getBusinessBind(form)"
              @change="onLinkageChange(form)"
              @fetch="onFetch"
              class="w100"
            />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>
